<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>头条</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="static/css/style.css">
	</head>

	<body>
		<div class="container">
			<style>
				.layui-table .laytable-cell-checkbox {
					margin: 0px 20px;
				}
				
				.demoTable button:nth-of-type(2) {
					margin-left: 15px!important;
				}
				
				.layui-table-cell {
					height: auto;
				}
			</style>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>头条</legend>
			</fieldset>

			<div class="layui-btn-group demoTable">
<!--				<button type="button" class="layui-btn layui-btn-danger delet" data-type='getCheckData'><i class="layui-icon"></i></button>-->
				<!--<button type="button" class="layui-btn layui-btn-danger xinzeng" lay-event="del">发布头条</button>-->
			</div>

			<table id="demo" lay-filter="test"></table>
		</div>
		<!--<div id="test1"></div>-->
		<script type="text/html" id="barDemo2">
			<img src="{{d.image}}" />
		</script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/common.js"></script>
		<script src="layui/layui.js"></script>
		<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
		<script type="text/html" id="barDemo">
			<!--<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="query">查看详情</a>-->
			<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="update">修改图片</a>
<!--			<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="del">删除头条</a>-->

		</script>
		<script>
			//时间控件
			layui.use('laydate', function() {
				var laydate = layui.laydate;
				//执行一个laydate实例
				laydate.render({
					elem: '#test1' //指定元素
				});
			});

			var list;
			var title = $('.title').val();
			//				var addtime;
			var addtime = $('.addtime').val();
			var laypage;
			$(function() {
				layui.use(['form', 'laypage'], function() {
					userlist("", "");
					form = layui.form;
					laypage = layui.laypage;

					// form.on('select(title)', function(data) {
					// 	title = title;
					// 	console.log(title);
					// 	userlist($('.title'), $('.addtime'));
					// });
					// form.on('select(addtime)', function(data) {
					// 	addtime = data.value;
					// 	console.log(addtime);
					// 	userlist($('.title'), $('.addtime'));
					// });

				})
				//
				// $("#search").click(function() {
				// 	var dining_name = $(".diningName").val();
				// 	var addtime = $(".addtime").val();
				// 	userlist(dining_name, addtime);
				// })
			})

			function userlist(dining_name, addtime) {

				$.ajax({
					type: "POST", //提交方式 
					url: baseurl + "/tt/query", //baseurl + "/com/users", //路径
					dataType: 'json', //数据，这里使用的是Json格式进行传输
					success: function(data) { //返回数据根据结果进行相应的处理 
						console.log(data)
						list = data.data;
						layui.use('table', function() {
							var table = layui.table;
							//第一个实例
							table.render({
								elem: '#demo',
								id: 'testReload',
								data: list, //数据接口
								page: true, //开启分页
								totalRow: true, //开启合计行
								limit: 10,
								limits: [10],
								cols: [
									[ {
										field: 'id',
										title: 'ID',
										width: 200,
										align: 'center',
									}, {
										title: '操作',
										width: 200,
										toolbar: '#barDemo',
										align: 'center',
									}]
								]
							});


							laypage.render({
								elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
									,
								count: data.data.total, //数据总数，从服务端得到
								jump: function(obj, first) { //jump 跳转
									//obj包含了当前分页的所有参数，比如：
									console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
									console.log(obj.limit); //得到每页显示的条数

									//首次不执行
									if(!first) {
										//do something
										$.ajax({
											type: "POST", //提交方式 
											url: baseurl + "/com/users", //路径 
											dataType: 'json',
											data: {
												//userId: localStorage.getItem("userId"),
												//												title: title,
												//												addtime: addtime,
												//												address: address,
												//												page: obj.curr
											}, //数据，这里使用的是Json格式进行传输 
											success: function(data) {
												if(data.meta.code == 200) {
													table.reload('testReload', {
														data: data.data.list
													});
												}
											}
										})
									}
								}
							});
							//点击查看详情 跳出
							table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
								var data = obj.data; //获得当前行数据

								var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
								var tr = obj.tr; //获得当前行 tr 的DOM对象
								var announcementId = obj.data.id;
								if(layEvent === 'query') { //删除
									layer.open({
										type: 2,
										title: '图片详情',
										maxmin: true,
										shadeClose: true, //点击遮罩关闭层
										area: ['800px', '800px'],
										content: 'xiangqing.html' //?userId=+ userId
									});
								} else {
									layer.open({
										type: 2,
										title: '修改头条',
										maxmin: true,
										shadeClose: true, //点击遮罩关闭层
										area: ['800px', '800px'],
										content: 'upannment2.html?announcementId=' + announcementId //?userId=+ userId
									});
								}
							});
						});
					}
				});
			}
		</script>
	</body>

</html>